<template>
  <div class="transition">
    <el-button type="primary" @click="cutFade">切换cutFade </el-button>
    <!-- 
      @before-enter="beforeEnter" //对应enter-from
      @enter="enter"//对应enter-active
      @after-enter="afterEnter"//对应enter-to
      @enter-cancelled="enterCancelled"//显示过度打断
      @before-leave="beforeLeave"//对应leave-from
      @leave="leave"//对应enter-active
      @after-leave="afterLeave"//对应leave-to
      @leave-cancelled="leaveCancelled"//离开过度打断
        -->
    <transition
      name="fade"
      @before-enter="EnterFrom"
      @enter="Enter"
      @after-enter="EnterTo"
      @enter-cancelled="EnterCancel"
      @before-leave="LeaveFrom"
      @leave="Leave"
      @after-leave="LeaveTo"
      @leave-cancelled="LeaveCancel"
      appear
      appear-active-class="animate__animated animate__fadeIn"
      appear-from-class="animate__animated animate__fadeOutUp"
      appear-to-class="animate__animated animate__bounceOutRight"
    >
      <div class="ball" v-if="flag"></div>
    </transition>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import "animate.css";
// 1、yarn add gsap 或者 npm install gsap -S

// 2、引入
import gsap from "gsap";

const flag = ref<boolean>(true);
const cutFade = () => {
  flag.value = !flag.value;
};

const EnterFrom = (el: Element) => {
  console.log("进入之前", el);
  gsap.set(el, {
    width: 0,
    height: 0,
  });
};

const Enter = (el: Element, toDo: gsap.Callback) => {
  console.log("进入过渡曲线");
  gsap.to(el, {
    width: 200,
    height: 200,
    onComplete: toDo,
  });
};

const EnterTo = (el: Element) => {
  gsap.set(el, {
    width: "200px",
    height: "200px",
  });
  console.log("过渡完成");
};

const EnterCancel = (el: Element) => {
  console.log("过渡效果被打断");
};

// ---------------------------------------
const LeaveFrom = (el: Element) => {
  console.log("离开之前", el);
};

const Leave = (el: Element, toDo: gsap.Callback) => {
  console.log("离开过渡曲线");
  gsap.to(el, {
    width: 0,
    height: 0,
    onComplete: toDo,
  });
};

const LeaveTo = (el: Element) => {
  console.log("离开过渡完成");
};

const LeaveCancel = (el: Element) => {
  console.log("离开过渡效果被打断");
};
</script>
<style lang="less" scoped>
.transition {
  height: 600px;
  width: 800px;
  margin: 0 auto;
  margin-top: 50px;
  padding: 30px;
  background: coral;
  .ball {
    height: 200px;
    width: 200px;
    background: springgreen;
  }
}
</style>
